<template>
	<view>
		<cu-page-bg></cu-page-bg>
		<view class="cu-w-100">
			<cu-navbar title="背景设置" :placeholder="true" @leftClick="vk.navigateBack()" :showLeft="true"
				:leftIconColor="{color:backgroundStyle.color}" :titleStyle="{color:backgroundStyle.color}"
				:style="getBackgroundStyle" bgColor="rgb(255,255,255,0)"></cu-navbar>
			<cu-card :style='{"marginTop" : "40rpx"}'>
				<u-cell title="主色调">
					<cu-icon custom-prefix="iconfont" slot="icon" size="24" name="icon-yanse"></cu-icon>
					<view slot="right-icon">
						<view @click="open(main,'main')" class="cu-border-radius-2" :style="[getMainColor]"></view>
					</view>
				</u-cell>
				<u-cell title=" 次色调" :border="false">
					<cu-icon custom-prefix="iconfont" slot="icon" size="24" name="icon-yanse"></cu-icon>
					<view slot="right-icon">
						<view @click="open(secondary,'secondary')" class="cu-border-radius-2"
							:style="[getSecondaryColor]"></view>
					</view>
				</u-cell>
			</cu-card>
			<cu-card :style='{"marginTop" : "40rpx"}'>
				<u-cell-group :border="false">
					<u-cell title="设置背景图片" :border="false" @click="setBgImage()">
						<cu-icon slot="icon" size="24" custom-prefix="iconfont" name="icon-yanse"></cu-icon>
					</u-cell>
				</u-cell-group>
			</cu-card>
			<cu-color-picker ref="colorPicker" :color="color" @confirm="confirm"></cu-color-picker>
		</view>
	</view>
</template>

<script>
	let vk = uni.vk;
	export default {
		computed: {
			getBackgroundStyle() {
				let style = {};
				style.background = "linear-gradient(45deg, " + this.main + ", " + this.secondary + ")";
				// 合并用户传递的背景色对象
				Object.assign(style, this.backgroundStyle);
				return style;
			},
			getMainColor() {
				let style = {};
				style.background = this.main;
				style.width = "200px";
				style.height = "40px";
				return style;
			},
			getSecondaryColor() {
				let style = {};
				style.background = this.secondary;
				style.width = "200px";
				style.height = "40px";
				return style;
			}
		},
		data() {
			return {
				main: vk.getVuex('$app.color.main'),
				secondary: vk.getVuex('$app.color.secondary'),
				buttonColor: "linear-gradient(to right, " + vk.getVuex('$app.color.main') + "," + vk.getVuex(
					'$app.color.secondary') + ")",
				backgroundStyle: {
					color: "#FFF"
				},
				color: {
					r: 255,
					g: 0,
					b: 0,
					a: 1
				},
				colorType: "main",
				maxFileSize: 500 * 1024,
			};
		},
		onLoad(options) {
			vk = uni.vk;
			this.init(options);
		},
		onShow() {
			this.init(undefined);
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.main = vk.getVuex('$app.color.main');
				this.secondary = vk.getVuex('$app.color.secondary');
			},
			open(color, colorType) {
				this.color = color
				this.colorType = colorType
				// 打开颜色选择器
				this.$refs.colorPicker.open();
			},
			confirm(e) {
				let color = `rgba(${e.rgba.r}, ${e.rgba.g},${e.rgba.b},${e.rgba.a})`;
				// console.log('颜色选择器返回值：' + color)
				// console.log('颜色选择器返回值：' + e.hex)
				if (this.colorType === "main") {
					vk.setVuex('$app.color.main', color)
					this.main = color
				} else if (this.colorType === "secondary") {
					vk.setVuex('$app.color.secondary', color)
					this.secondary = color
				}
			},
			setBgImage() {
				const that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ["image"],
					success: function(e) {
						const maxSize = that.maxFileSize;
						const data = {
							url: e && e.tempFiles && e.tempFiles[0] ? e.tempFiles[0].tempFilePath :
								undefined
						}
						if(data.url === undefined) {
							uni.showToast({
								icon: "error",
								title: '获取文件失败',
								duration: 2000
							});
							return false;
						}
						const size = e.tempFiles[0].size;
						if (size > maxSize) {
							uni.showToast({
								icon: "error",
								title: '文件大小超过限制,应不超过500KB',
								duration: 2000
							});
							return false;
						}
						else {
							that.$store.dispatch('$app/updateBgImg', data);
						}
						
					},
					fail: function(e) {
						uni.showToast({
							icon: "error",
							title: '设置失败',
							duration: 2000
						});
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>